當別人說你的程式是義大利麵代碼 (Spaghetti code),聽起來很好吃,應該是稱讚的意思吧!千萬不要誤會,那是在說你的程式碼雜亂無章、難以理解。
在前面的章節我們學到可以隨意命名 HTML 元素的 ID 和 Class 名稱,意味著沒有結構化的命名模式下,可能會因為重複命名,需要去解決 CSS 衝突的問題,就一直往下新增 CSS 代碼,導致程式亂亂的。所以本篇的教學重點就是:建立易讀易寫的CSS代碼規則 — OOCSS / BEM。
OOCSS (Object Oriented CSS),主張用物件的形式管理 CSS 的分類規則,專注在讓組件的重複使用性提升,並且提出下面兩個主要的原則:
將重複的樣式抽離,獨立成一個組件重複使用。舉例來說如下面的程式碼,紅色的 box 和紅色的 button,那我們就可以把紅色的樣式抽離出來:
CSS
.box {
width: 200px;
height: 50px;
}
.button {
width: 100px;
height: 50px;
padding: 10px;
}
.red-skin {
background-color: red;
}
HTML
<div class="red-skin box"></div>
<button class="red-skin button"></div>
將容器內部通用的結構分離。舉例來說如下面的程式碼,Header 雖然在 Section 跟 Footer 區塊都會出現,外觀一樣但安裝的位置不一樣,那我們就可以將 Header 像零件一樣抽離,再另外設定各自安裝的位置:
CSS
.global-header {
font-size: 28px;
width:500px;
height:10px
}
.section-header {
padding: 10px;
}
.footer-header {
padding: 5px;
}
HTML
<section>
<div class="section-header global-header">...</div>
</section>
<footer>
<div class="footer-header global-header">...</div>
</footer>
BEM (Block, Element, Modifier),主張劃分網頁區塊,以區塊 (Block)、元素 (Element) 和修飾子 (Modifier) 命名,用組件的模式去進行介面開發。
指的是獨立的頁面元件
<header class="header">
<div class="logo">...</div>
<ul class="menu">
<li>...</li>
<li>...</li>
</ul>
</header>
存在於 Block 中不可單獨存在的小元件,使用雙底線 __
做分隔。
<header class="header">
<div class="logo">
<!-- logo中的元素 -->
<img class="logo__img" />
<h1 class="logo__title" />
</div>
<ul class="menu">
<!-- menu中的item元素 -->
<li class="menu__item">...</li>
<li class="menu__item">...</li>
</ul>
</header>
描述 Block 或 Element 的外觀,不能單獨使用,用單底線 _
做分隔。
<header class="header">
<div class="logo">...</div>
<ul class="menu">
<li class="menu__item">...</li>
<!-- menu中的item--active元素 -->
<li class="menu__item_active">...</li>
</ul>
</header>
OOCSS 強調的能提升組件的重複使用性、BEM 能讓命名結構更清楚,最主要的是能活用兩者的核心規則,建立易讀易寫的CSS,方便之後維護與管理。這個章節雖然只介紹了這兩種,但其實還有 SMACSS 的方式來管理 CSS,建議你都可以了解一下。那今天的介紹就到這,接下來我們會提到最後一個網頁核心技術 — Javascript,那我們就下章再見囉!
如果文章中有錯誤的地方,要麻煩各位大大不吝賜教;喜歡的話,也要記得幫我按讚訂閱喔❤️